<div class="container mt-5">
  <!-- 头像部分 -->
  <div
    class="card p-4 d-flex align-items-center flex-row justify-content-between"
  >
    <img
      id="profile-avatar"
      src="./assets/default-avatar.png"
      class="rounded-circle"
      alt=""
      width="120"
      height="120"
    />
    <div class="text-end">
      <input
        type="file"
        id="upload-avatar"
        accept="image/*"
        class="form-control d-none"
      />
      <button
        id="change-avatar-btn"
        class="btn btn-sm btn-outline-primary"
        style="font-size: 1rem"
      >
        更换头像
      </button>
    </div>
  </div>

  <!-- 账户信息部分 -->
  <div class="card p-4 mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h5 class="mb-0">账户信息</h5>
      <button
        class="btn btn-sm btn-outline-primary"
        id="edit-info-btn"
        style="font-size: 1rem"
      >
        编辑
      </button>
    </div>
    <div id="user-info-container">
      <!-- JS 动态填充用户名、邮箱、真实姓名 -->
    </div>
  </div>

  <!-- 编辑信息弹窗 -->
  <div
    class="modal fade"
    id="editUserModal"
    tabindex="-1"
    aria-labelledby="editUserModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="editUserModalLabel">编辑账户信息</h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="关闭"
          ></button>
        </div>
        <div class="modal-body">
          <form id="edit-user-form">
            <div class="mb-3">
              <label for="username-input" class="form-label">用户名</label>
              <input
                type="text"
                class="form-control"
                id="username-input"
                required
              />
            </div>
            <div class="mb-3">
              <label for="email-input" class="form-label">邮箱</label>
              <input
                type="email"
                class="form-control"
                id="email-input"
                required
              />
            </div>
            <div class="mb-3">
              <label for="realname-input" class="form-label">真实姓名</label>
              <input type="text" class="form-control" id="realname-input" />
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" form="edit-user-form" class="btn btn-primary">
            保存
          </button>
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal"
          >
            取消
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
